<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的请求</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/extends/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
</head>
<body class="listBody">
<div class="qbdms-list">
<div class="layui-table-view-body" style="position: relative;height: 100%;">
    <div class="ccpui-trees" >
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: #fff">&nbsp;&nbsp;流程分类</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul class="ccpui-iconTree iconTrees">
                <li><a class="iconfont data-iconcommon_refresh zTree-refresh" title="刷新"></a></li>
                <li><a class="layui-icon layui-icon-triangle-d zTree-triangle-d" title="展开"></a></li>
                <li><a class="layui-icon layui-icon-triangle-r zTree-triangle-r" title="收起"></a></li>
                <input type="text" style="width: 50%" class="catZtreeValue">
            </ul>
            <ul id="treeSelectGlobalType" class="ztree ccpui-listZtree"></ul>
        </div>
    </div>
    <div class="ccpui-coreContent" >
        <table id="myRequestList" lay-filter="myRequestList" ></table>
    </div>
</div>
</div>


<script type="text/html" id="headerToolsBar">
    <div class="ccpui-enterSel">
    <form class="layui-form" action="" lay-filter="myRequestListQueryForm">
        <div class="layui-form-body selch" style="margin-top: 0">
        <div class="table-top-filter layui-row qbdms-treeSql">
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">请求标题</label>
                <div class="layui-input-block">
                <input type="text" name="Q_subject_SL" id="subject" class="layui-input filter-value" placeholder="请求标题"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">流程名称</label>
                <div class="layui-input-block">
                <input type="text" name="Q_processName_SL" id="processName" class="layui-input filter-value"
                       placeholder="流程名称"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                <select name="status" id="status" class="layui-input filter-value">
                    <option value="">所有</option>
                    <option value="1">正在运行</option>
                    <option value="5">已撤销</option>
                    <option value="6">已驳回</option>
                    <option value="7">已追回</option>
                </select>
                </div>
            </div>

            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">工单号</label>
                <div class="layui-input-block">
                <input type="text" name="Q_globalFlowNo_SL" id="globalFlowNo" class="layui-input filter-value"
                       placeholder="工单号"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">创建开始时间</label>
                <div class="layui-input-block">
                <input type="text" name="Q_createTime_DL" id="createTime" class="layui-input filter-value"
                       placeholder="开始时间"/>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm6">
                <label class="layui-form-label">创建结束时间</label>
                <div class="layui-input-block">
                <input type="text" name="Q_endCreateTime_DG" id="endCreateTime" class="layui-input filter-value"
                       placeholder="结束时间"/>
                </div>
            </div>
        </div>
            <div class="selchBtn">
                <a class="layui-btn layui-btn-sm fillBtn" lay-event="query">
                    <span>查询</span>
                </a>
                <div class="layui-btn-group">
                    <button type="button" class="layui-btn layui-btn-sm" lay-event="reset" style="width: 28px;font-size: 12px;padding: 0">
                        <i class="iconfont data-iconcommon_refresh"></i>
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm screenParent" lay-event="screen" style="width: 28px;font-size: 12px;padding: 0">
                        <i class="iconfont data-iconcommon_downarrow screen"></i>
                    </button>
                </div>
            </div>
        </div>
    </form>
    </div>
</script>
<!--表格序列号-->
<script type="text/html" id="serialNum">
    {{d.LAY_TABLE_INDEX + 1}}
</script>
<script type="text/html" id="myRequestBar">

    {{#  if(d.status != 7 && !d.currentNodeIsFirst){ }}
    <a class="RightBtn" lay-event="recover">追回</a>
    {{#  } }}

    {{#  if(d.status == 7 || d.currentNodeIsFirst ){ }}
    <a class="RightBtn" lay-event="del">删除</a>
    {{#  } }}

</script>
<script src="${ctx}/extends/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.all.min.js" type="text/javascript"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.exhide.min.js" type="text/javascript"></script>
<script>
    layui.config({
        base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table', 'layer', 'laydate', 'util', 'publicMethods', 'setter', 'common'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        var setter = layui.setter;
        var laydate = layui.laydate;
        var publicMethods = layui.publicMethods;
        var common = layui.common;

        var tableH = publicMethods.tabHeight();

        catZtree();
        loadTable(serverPath.qbdmsPath + setter.workflowLinkPath + 'processRun/list/myRequestList');

        function catZtree() {
            $.ajax({
                url: serverPath.qbdmsPath + setter.workflowLinkPath+"processRun/getMyRequestAndMyCompletedType?category=myRequest",
                type: "post",
                dataType: 'json',
                async: false,
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType
                        }
                    };
                    $.fn.zTree.init($('#treeSelectGlobalType'), setting, zNodes);
                    component.fuzzySearch('treeSelectGlobalType', '.catZtreeValue', null, true); //初始化模糊搜索方法
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                }
            });
        }


        //点击左树事件
        function onClickType(event, treeId, treeNode) {
            var selectTypeId = treeNode.typeId;
            var nodePath = treeNode.nodePath;
            var url = serverPath.qbdmsPath + setter.workflowLinkPath + 'processRun/list/myRequestList?typeId=' + selectTypeId + '&nodePath=' + nodePath;
            if (null == treeNode.parentId) {
                url = serverPath.qbdmsPath + setter.workflowLinkPath + 'processRun/list/myRequestList';
            }
            loadTable(url);
        }

        //展开
        $(".iconTrees .zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(true);
        });
        //收起
        $(".iconTrees .zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(false);
        });
        //刷新
        $(".iconTrees .zTree-refresh").click(function () {
            catZtree();
        });

        //第一个实例

        function loadTable(url) {
            table.render({
                elem: '#myRequestList'
                , cellMinWidth: 80
                , title: '流程定义模型'
                , height: tableH
                , url: url
                , method: 'post'
                , toolbar: '#headerToolsBar'
                ,defaultToolbar: ['']
                , page: true
                ,autoSort: false
                , cols: [[
                    {field: 'runId', title: '序号', width:80,align: 'center',fixed:'left', templet: '#serialNum'}
                    , {field: 'globalFlowNo', title: '工单号', minWidth: 150}
                    , {
                        field: 'subject',
                        title: '请求标题',
                        minWidth: 300,
                        event: 'detail',
                        style: 'color:#1E9FFF; cursor:pointer',
                    }

                    , {
                        field: 'processName', title: '流程名称', minWidth: 120,
                    }

                    , {
                        field: 'createtime', title: '创建时间', minWidth: 200,  templet: function (d) {
                            return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                        }
                    }
                    , {
                        field: 'duration', title: '持续时间',minWidth: 180,templet: function (d) {
                            var date1 = util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");  //开始时间
                            if(d.endTime==null) {
                                var date2 = new Date();    //结束时间
                            }else {
                                var date2 = new Date(util.toDateString(d.endTime, "yyyy-MM-dd HH:mm:ss"));
                            }
                            var date3 = date2.getTime() - new Date(date1.replace(/-/g ,'/')).getTime();   //时间差的毫秒数
                            //计算出相差天数
                            var days = Math.floor(date3 / (24 * 3600 * 1000))
                            //计算出小时数
                            var leave1 = date3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                            var hours = Math.floor(leave1 / (3600 * 1000))
                            //计算相差分钟数
                            var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                            var minutes = Math.floor(leave2 / (60 * 1000))

                            return days + "天" + hours + "时" + minutes + "分";
                        }
                    }
                    , {field: 'typeName', title: '类型', width:100}
                    , {
                        field: 'status',
                        title: '状态',
                        width:100,
                        templet: function (d) {
                            if (d.status == 1) {
                                return '<span class="qbdms-statusColor" style=" background-color:rgba(38,130,255,1);"></span>正在运行';
                            } else if (d.status == 5) {
                                return '<span class="qbdms-statusColor" style=" background-color:#67C23A"></span>已撤销';
                            } else if (d.status == 6) {
                                return '<span class="qbdms-statusColor" style="background:#F04134;"></span>已驳回';
                            } else if (d.status == 7) {
                                return '<span class="qbdms-statusColor" style="background:#67C23A;"></span>已追回';
                            }
                        }
                    }
                    // , {title: '管理', toolbar: '#myRequestBar',fixed:'right'}
                ]],
                done:function () {
                    publicMethods.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
                    common.tableSelectCon('.ccpui-enterSel .layui-form input','a[lay-event=query]','.ccpui-enterSel')
                }
            });
        }
        common.initScreenTop('myRequestList',true,false,{number:3,width:460});
        table.on('toolbar(myRequestList)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("myRequestList", "myRequestListQueryForm", {where: {}}, false);
                    break;
                case 'reset':
                    common.tableConditionRender("myRequestList", "myRequestListQueryForm", {where: {}}, true);
                    break;
                case "screen":
                    common.initScreenTop('myRequestList',false,false,{number:3,width:460});
                    break;
            }
        });


        table.on('tool(myRequestList)', function (obj) {
            var data = obj.data;
            var isNeedReload=true;
            switch (obj.event) {
                case 'detail':
                    var height=publicMethods.layHeight('.listBody');
                     layer.open({
                         type: 2,
                         title: "流程明细",
                         skin:'qbdms-layerFormBtn',
                         area: ['90%', height],
                         content: serverPath.qbdmsPath + '/workflow/processRun/view/info?runId=' + data.runId
                             + '&prePage=' + "myRequest",
                         cancel: function(index, layero){
                             isNeedReload=false;
                         },
                         end:function () {
                             if(isNeedReload){
                                 table.reload('myRequestList', {
                                     page: {
                                         curr: 1
                                     }
                                 });
                             }
                         }
                     });
                    break;
                case 'del':
                    layer.confirm(
                        publicMethods.confirmStyle("确认要删除该数据吗？"),{title: false,skin: 'confirm-class'}, function (index) {
                        $.ajax({
                            url: serverPath.qbdmsPath + setter.workflowLinkPath + "processRun/del?runId=" + data.runId,
                            type: 'DELETE',
                            dataType: 'json',
                            success: function (data) {
                                //成功后的提示
                                if(data.code == 0){
                                    layer.alert(publicMethods.confirmStyle("删除成功"),{title: false,skin: 'confirm-class'});
                                    table.reload('myRequestList', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                }else {
                                    layer.alert(publicMethods.confirmStyle("删除失败"),{title: false,skin: 'confirm-class'});
                                }

                                layer.close(index);
                            },
                            error: function (XMLHttpRequest) {
                                layer.alert("请求失败！" + XMLHttpRequest.status);
                            }
                        });
                    });
                    break;
                case 'recover':
                    layer.open({
                        type: 2,
                        title: "流程追回",
                        shade: 0.3,
                        btn:["追回","取消"],
                        btnAlign:'c',
                        skin: 'btn-class',
                        area: ['450px', '300px'],
                        content: '${ctx}/extend/processRun/view/redoDialog?runId='
                            + data.runId + '&backToStart=' + 0,
                        yes: function (index,layero) {
                            //得到iframe页的窗口对象
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            //执行iframe页的save方法
                            iframeWin.recover(reload);
                        }
                    });
                    break;
            }
        });

        function reload(){
            table.reload('myRequestList', {
                page: {
                    curr: 1
                }
            });
        }

        publicMethods.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        window.Initialization = function () {
            publicMethods.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        };
    });
</script>
</body>
</html>
